<div>
  <h2>资源的输入输出<i>i/o</i></h2>
  <h3>资源处理流程</h3>
  <ul>
    <li>webpack 会从入口文件开始检索，并将具有依赖关系的模块生成一颗树，最终得到一个 chunk</li>
    <li>这个 chunk打包的产物我们称为 bundle</li>
    <li>在工程中，可以定义多个入口，每一个入口都会产生一个结果资源</li>
    <li>在一些特殊情况下，一个入口也可能产生多个 chunck 并最终生成多个 bundle</li>
  </ul>
  <h3>配置入口</h3>
  <ul>
    <li>
      entry: 定义入口模块位置和定义 chunk.name,单页面默认为 main,多页面需要为每个入口定义 chunk.name
    </li>
    <li>
      context：资源入口路径前缀，配置时要求必须用<span>绝对路径</span>，在多入口情况下，可以让 entry 编写更加整洁。也可以省略，默认值为当前工程根目录
    </li>
    <li>
      entry可以配置字符串类型，数组类型，对象类型和函数类型的入口。数组类型的作用是将多个资源预先合并，在打包时 webpack会以最后一个元素作为实际入口路径；如果定义多入口,则<span>必须使用对象形式</span>。对象的属性名是 chunk.name,属性值是入口路径；函数形式定义时，只需返回以上配置即可
    </li>
    <li>
      单页面应用的弊端，组件过多导致资源体积过大，影响渲染速度。在 webpack 中，当一个 bundle 体积大于250 kb 时会认为 bundle 已经过大了，在打包时会发出警告。优化方式是 <span>提取公共模块，配置splitChunks</span>，这个配置会将第三方模块抽取出来形成一个新的 bundle
    </li>
  </ul>

  <h3>配置出口</h3>
  <ul>
    <li>
      filename：作用是控制输出资源的文件名，也可以设置成一个相对路径，Webpack会在输出资源时创建该目录。配置[name]为 chunk.name,配置 [hash]为<span>webpack此次打包所有资源生成的 hash</span>。可以在开发环境下或生产环境控制客户端缓存，显示最新的代码。还可以配置 [chunkhash] [id] [query]等达到相同的效果
    </li>
    <li>
      path: 指定输出的位置。webpack4 之后，默认输出位置在 dist
    </li>
    <li>
      publicPath: 静态资源的存在位置，<span>跟文件中的 src 路径无关,即 location.origin</span>。可以配置 HTML 相关的相对路径，与 host 相关的，以‘/’开头的路径，或与 cdn 相关的绝对路径
    </li>
    <li>
      webpack-dev-server 中也有一个 publicPath，跟着个的区别还要研究
    </li>
  </ul>
</div>